<template>
  <div>
    <el-form ref="formRef" :model="article">
      <el-form-item label="标题" label-width="80px">
        <el-input v-model="article.title" @keydown.enter.prevent placeholder="请输入文章标题" />
      </el-form-item>
      <el-form-item label="副标题" label-width="80px">
        <el-input
          v-model="article.sub_title"
          @keydown.enter.prevent
          placeholder="请输入列表展示内容" />
      </el-form-item>
      <el-form-item label="分类" label-width="80px">
        <el-select
          style="width: calc(100% - 46px)"
          filterable
          placeholder="请选择分类"
          v-model="article.category_id"
          :options="categoryList">
          <el-option
            v-for="item in categoryList"
            @click="changeOption(item)"
            :key="item.category_id"
            :label="item.name"
            :value="item.category_id" />
        </el-select>
        <el-button @click="categoryShow = true">
          <el-icon>
            <i-ep-Plus />
          </el-icon>
        </el-button>
      </el-form-item>
      <div class="df ai-c upload">
        <span>封面</span>
        <el-upload
          v-model:file-list="fileList"
          :limit="1"
          accept=".jpeg,.jpg,.gif,.png"
          class="upload-btn"
          :action="uploadAction"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          list-type="picture-card">
          <el-icon><i-ep-Plus /></el-icon>
        </el-upload>
      </div>
    </el-form>
    <!-- 富文本编辑器 -->
    <Md-editor v-model="article.content"></Md-editor>
    <div class="edit-btn">
      <el-button type="primary" style="margin-top: 10px" @click="submit">提交</el-button>
    </div>
  </div>
  <!-- 新增分类 -弹窗 -->
  <categoryAdd v-model="categoryShow" @reloadList="getCategoryListFun"></categoryAdd>
</template>

<script setup lang="ts">
  import { getCategoryList } from '@/apis/category';
  import { addBlog, getBlogDetail, updateBlog } from '@/apis/article';
  import MdEditor from '@/components/editor/Md-editor.vue';
  import type { UploadProps, UploadUserFile } from 'element-plus';
  import categoryAdd from '@/components/category/category-add.vue';
  import type { IBlog, ICategory } from '@/apis/type';
  import { joinUplodUrl } from '@/utils/utils';
  // 父级传值 和 方法
  const props = defineProps({
    currentId: {
      default: ''
    }
  });
  const $emits = defineEmits(['getListFun']);

  // 封面上传路径
  const uploadAction = import.meta.env.VITE_VUE_UPLOAD_URL + '/upload/rich_editor_upload';
  // 封面文件列表
  const fileList = ref<UploadUserFile[]>([]);
  // 删除封面
  const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles);
  };
  // 查看封面
  const handlePreview: UploadProps['onPreview'] = file => {
    console.log(file);
  };
  // 封面上传成功回调
  const handleSuccess = (res: any) => {
    const url = res.data.url;
    fileList.value = [
      {
        name: '封面',
        url: url
      }
    ];
    article.value.cover = url;
  };

  // 提交
  const submit = async () => {
    let res;
    if (!props.currentId) {
      res = await addBlog(article.value);
    } else {
      res = await updateBlog(article.value);
    }
    if (res.code != 200) return ElMessage.error(res.msg);
    else {
      $emits('getListFun');
      ElMessage.success(res.msg);
    }
  };
  const changeOption = (item: ICategory) => {
    article.value.category_name = item.name;
  };

  // 分类
  let categoryList: Ref<ICategory[]> = ref([]);
  const categoryShow = ref(false);
  const getCategoryListFun = async () => {
    const res = await getCategoryList();
    if (res.code != 200) return ElMessage.error(res.msg);
    categoryList.value = res.data;
  };
  getCategoryListFun();

  // 博客内容
  const article = ref({} as IBlog);
  const getDetail = async () => {
    if (!props.currentId) return;
    const articleRes = await getBlogDetail({ id: props.currentId });
    article.value = articleRes.data[0];
    fileList.value = [
      {
        name: '封面',
        url: joinUplodUrl(article.value.cover)
      }
    ];
  };
  getDetail();
</script>

<style lang="scss" scoped>
  .edit-btn {
    display: flex;
    justify-content: flex-end;
  }
  .upload {
    margin-bottom: 18px;
    span {
      width: 80px;
      text-align: right;
      padding-right: 10px;
    }
  }
</style>
